import React, { useState } from 'react'
import { useEffect } from 'react'

export default function TestEffect({age}) {
    let [count, setCount] = useState(1)
    let [msg, setMsg] = useState('atguigu')

    // 用法一：useEffect(回调函数) ： componentDidMount + componentDidUpdate [all state + all props]
    // useEffect(()=>{
    //     console.log('useEffect 执行了')
    // })
    // 用法二： 第二个参数是空数组： 单独模拟 componentDidMount
    // useEffect(()=>{
    //     console.log('useEffect run')
    // },[])

    // 用法三：监听指定的数据变化更新后运行 模拟 componentDidMount + componentDidUpdate[监听的数据变化]
    // useEffect(()=>{
    //     console.log('useEffect run')
    // },[count,age]) // props state 都可以监听

    // useEffect(()=>{
    //     console.log('useEffect msg run ')
    // },[msg])
    // 以上：一个组件可以有多个useEffect

    // 用法四: 模拟：componentDidMount + componentWillUnmount
    useEffect(()=>{
        console.log('didMount')
        // 返回值函数，就是componentWillUnmount生命周期
        return ()=>{
            console.log('willUnmount')
        }
    },[])


    console.log('render之前')
    return (
        <div>
            <h4>useEffect</h4>
            <p>state count: {count}</p>
            <p>state msg: {msg}</p>
            <p>props age: {age}</p>
            <p><button onClick={()=>{
                setCount(count +  1)
            }}>count 更新</button></p>
            <p><button onClick={()=>{
                setMsg(msg + '!')
            }}>msg 更新</button></p>
        </div>
    )
}
